<template>
	<view class="favorite-page">
		<view class="favorite-header">
			<text class="title">我的收藏</text>
			<text class="manage-btn" @click="toggleManageMode">{{ isManageMode ? '完成' : '管理' }}</text>
		</view>
		<view class="favorite-grid">
			<view v-for="item in favoriteList" :key="item.id" class="product-wrapper">
				<view v-if="isManageMode" class="checkbox-wrapper" @click.stop="toggleSelect(item)">
					<view class="checkbox" :class="{ 'checked': selectedItems.includes(item.id) }">
						<text v-if="selectedItems.includes(item.id)" class="check-icon">✓</text>
					</view>
				</view>
				<product-card tag-type="discount" :image-url="item.image" :title="item.title" :price="item.price"
					:original-price="item.price" @click="handleItemClick(item)" />
			</view>
		</view>
		<uni-load-more :status="loadMoreStatus" />

		<!-- 底部操作栏 -->
		<view v-if="isManageMode" class="bottom-bar">
			<view class="select-all" @click="toggleSelectAll">
				<view class="checkbox" :class="{ 'checked': isAllSelected }">
					<text v-if="isAllSelected" class="check-icon">✓</text>
				</view>
				<text>全选</text>
			</view>
			<view>
				<button class="delete-btn" @click="handleBatchDelete" :disabled="!selectedItems.length">
					取消收藏({{ selectedItems.length }})
				</button>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed
	} from 'vue'
	import ProductCard from '@/components/product-card/product-card.vue'

	// 收藏列表数据
	const favoriteList = ref([{
			id: 1,
			title: '商品名称示例1',
			price: '299.00',
			image: 'https://via.placeholder.com/200x200',
			time: '2024-01-10'
		},
		{
			id: 2,
			title: '商品名称示例2',
			price: '199.00',
			image: 'https://via.placeholder.com/200x200',
			time: '2024-01-09'
		}
	])

	// 管理模式状态
	const isManageMode = ref(false)
	const selectedItems = ref([])

	// 计算是否全选
	const isAllSelected = computed(() => {
		return favoriteList.value.length > 0 && selectedItems.value.length === favoriteList.value.length
	})

	// 加载更多状态
	const loadMoreStatus = ref('more')
	const page = ref(1)
	const pageSize = 10

	// 下拉刷新
	const onPullDownRefresh = async () => {
		try {
			page.value = 1
			// TODO: 调用接口刷新数据
			uni.stopPullDownRefresh()
		} catch (error) {
			console.error('刷新数据失败:', error)
			uni.stopPullDownRefresh()
		}
	}

	// 上拉加载更多
	const onReachBottom = async () => {
		if (loadMoreStatus.value === 'noMore') return

		loadMoreStatus.value = 'loading'
		try {
			// TODO: 调用接口加载更多数据
			page.value++
			// 模拟没有更多数据
			if (page.value > 3) {
				loadMoreStatus.value = 'noMore'
			} else {
				loadMoreStatus.value = 'more'
			}
		} catch (error) {
			console.error('加载更多数据失败:', error)
			loadMoreStatus.value = 'more'
		}
	}

	// 切换管理模式
	const toggleManageMode = () => {
		isManageMode.value = !isManageMode.value
		if (!isManageMode.value) {
			selectedItems.value = []
		}
	}

	// 切换选择状态
	const toggleSelect = (item) => {
		const index = selectedItems.value.indexOf(item.id)
		if (index === -1) {
			selectedItems.value.push(item.id)
		} else {
			selectedItems.value.splice(index, 1)
		}
	}

	// 切换全选状态
	const toggleSelectAll = () => {
		if (isAllSelected.value) {
			selectedItems.value = []
		} else {
			selectedItems.value = favoriteList.value.map(item => item.id)
		}
	}

	// 批量取消收藏
	const handleBatchDelete = () => {
		if (!selectedItems.value.length) return

		uni.showModal({
			title: '确认取消收藏',
			content: `是否取消收藏已选择的${selectedItems.value.length}个商品？`,
			success: (res) => {
				if (res.confirm) {
					// TODO: 调用接口删除收藏
					favoriteList.value = favoriteList.value.filter(item => !selectedItems.value.includes(
						item.id))
					selectedItems.value = []
					uni.showToast({
						title: '取消收藏成功',
						icon: 'success'
					})
				}
			}
		})
	}

	// 点击收藏项
	const handleItemClick = (item) => {
		if (isManageMode.value) {
			toggleSelect(item)
			return
		}
		uni.navigateTo({
			url: `/pages/product/product?id=${item.id}`
		})
	}

	// 页面生命周期
	onMounted(() => {
		// TODO: 初始化数据
	})

	// 导出页面事件处理函数
	defineExpose({
		onPullDownRefresh,
		onReachBottom
	})
</script>

<style lang="scss" scoped>
	.favorite-page {
		background-color: #f8f8f8;
		min-height: 100vh;
		padding-bottom: 100px;
		position: relative;
	}

	.favorite-header {
		padding: 10px 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		border-bottom: 1px solid #eee;

		.title {
			font-size: 16px;
			font-weight: bold;
		}

		.manage-btn {
			color: #666;
			font-size: 14px;
		}
	}

	.favorite-grid {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 10px;
		padding: 10px;
	}

	.product-wrapper {
		position: relative;
		display: flex;
	}

	.checkbox-wrapper {
		position: absolute;
		top: 10px;
		right: 0;
		z-index: 2;
	}

	.checkbox {
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border: 1px solid #ddd;
		background-color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;

		&.checked {
			background-color: #ff6b81;
			border-color: #ff6b81;
		}

		.check-icon {
			color: #fff;
			font-size: 12px;
		}
	}

	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 10px 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 1px solid #eee;

		.select-all {
			display: flex;
			align-items: center;
			gap: 5px;
			font-size: 14px;
		}

		.delete-btn {
			background-color: #ff6b81;
			color: #fff;
			padding: 6px 20px;
			border-radius: 20px;
			font-size: 14px;

			&:disabled {
				background-color: #ccc;
			}
		}
	}
</style>